<template>
  <div class="container flex">
    <div class="side-bar">
      <h2>全部分类</h2>
      <el-menu
        default-active=""
        @open="onChangeDataBaseCategory"
        @close="onChangeDataBaseCategory"
      >
        <el-menu-item index="" @click="onChangeDataBaseCategory">
          <template #title>全部分类</template>
        </el-menu-item>
        <el-sub-menu
          :index="item.id"
          v-for="item in dataBaseCateGoryTreeList"
          :key="item.id"
        >
          <template #title>{{ item.databaseCategoryName }}</template>
          <el-menu-item
            v-for="child in item.children"
            :key="child.id"
            :index="child.id"
            @click="onChangeDataBaseCategory"
          >
            {{ child.databaseCategoryName }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="content">
      <div class="search-wrap flex-yc">
        <div class="flex-yc">
          <el-input
            class="input"
            placeholder="请输入关键字搜索"
            :suffix-icon="Search"
            v-model="dataBaseArticleName"
            @input="onSearchDataBaseArticle"
          />
          <el-button type="primary" @click="onUploadArticle">上传</el-button>
        </div>
      </div>
      <div class="list-wrap">
        <dl v-for="item in dataBaseArticles" :key="item.id">
          <dt @click="$router.push('/database/detail?id=' + item.id)">
            {{ item.articleName }}
          </dt>
          <dd>{{ item.articleSummary }}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import {
  reqDataBaseArticleBody,
  respDataBaseArticle,
  respDataBaseCategoryTreeData,
} from '@/api/types/database'
import {
  reqGetDataBaseArticles,
  reqGetDataBaseCategory,
} from '@/api/database.ts'
import { onMounted, ref } from 'vue'
import { arrToTree } from '@/utils/utils.ts'
import { useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => {
  getDataBaseCategory()
  getDataBaseArticles()
})

// 数据库分类
const dataBaseCateGoryId = ref<number>(0)
const dataBaseCateGoryTreeList = ref<respDataBaseCategoryTreeData[]>([])
const getDataBaseCategory = async () => {
  const { data } = await reqGetDataBaseCategory()
  dataBaseCateGoryTreeList.value = arrToTree(data, null, {
    label: 'databaseCategoryName',
    parentId: 'parentCategoryId',
  })
}

const onChangeDataBaseCategory = (event: any) => {
  dataBaseCateGoryId.value = event.index !== undefined ? event.index : event
  getDataBaseArticles()
}

// 数据库文章
const dataBaseArticleName = ref('')
const dataBaseArticles = ref<respDataBaseArticle[]>([])
const getDataBaseArticles = async () => {
  let reqData: Partial<reqDataBaseArticleBody> = {}
  if (dataBaseCateGoryId.value) reqData.categoryId = dataBaseCateGoryId.value
  if (dataBaseArticleName.value) reqData.articleName = dataBaseArticleName.value
  const { data } = await reqGetDataBaseArticles(reqData)
  dataBaseArticles.value = data
}

// 搜索
const onSearchDataBaseArticle = () => {
  getDataBaseArticles()
}

const onUploadArticle = () => {
  router.push({ path: '/database/article/add' })
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding: 16px;

  .side-bar {
    flex-shrink: 0;
    border-right: 1px solid #f2f2f2;
    h2 {
      font-size: 20px;
      color: #021429;
      margin-bottom: 20px;
    }
    :deep(.el-menu) {
      border-right: none;
    }
  }

  .content {
    flex: 1;
    .search-wrap {
      justify-content: flex-end;

      .input {
        margin-right: 10px;
      }
    }
    .list-wrap {
      margin-top: 30px;
      margin-left: 16px;
      dl {
        border: 1px solid #dbdcdd;
        padding: 20px 20px 13px;
        & + dl {
          margin-top: 14px;
        }
        dt {
          font-size: 18px;
          color: #021429;
          &:hover {
            cursor: pointer;
            color: $primary;
          }
        }
        dd {
          font-size: 14px;
          color: #8691a3;
          line-height: 24px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
